<template>
  <div class="user">
    <user-header />
    <div class="userTop">
      <div class="containerWid">
        <div class="user-pic"><img src="@/assets/img/face.jpg"></div>
        <div class="user-name">追风筝的人</div>
        <div class="other-info">
          <span>男</span>
          <span>重庆</span>
          <span>Java工程师</span>
        </div>
      </div>
    </div>

    <div class="userContent containerWid">
      <router-view />
    </div>
    <bottom-footer :theme="footerTheme" />
  </div>
</template>

<script>
import UserHeader from '@/components/UserHeader.vue'
import BottomFooter from '@/components/Footer.vue'
export default {
  components: {
    UserHeader,
    BottomFooter
  },
  data() {
    return {
      footerTheme: 'black'
    }
  },
  mounted() {},
  methods: {}
}
</script>
<style lang="scss">
.user {
  background-color: #fff;
}
.userTop {
  height: 148px;
  background: url(../../assets/img/temp1.png) no-repeat center top #000;
  background-size: cover;
  .containerWid {
    position: relative;
    padding-left: 190px;
    padding-top: 54px;
    box-sizing: border-box;
  }
  .user-pic {
    width: 148px;
    height: 148px;
    border: 2px solid #fff;
    box-sizing: border-box;
    position: absolute;
    top: 24px;
    left: 0;
    border-radius: 50%;
    box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.1);
    img {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .user-name {
    font-weight: 600;
    font-size: 24px;
    color: #fff;
    line-height: 28px;
  }
  .other-info {
    margin-top: 15px;
    span {
      display: inline-block;
      margin-right: 10px;
      font-size: 14px;
      color: #fff;
      line-height: 20px;
    }
  }
}
.userContent {
  margin-top: 10px;
  .u-container {
    margin-left: 240px;
    min-height: 589px;
    .toptab {
      border-bottom: 1px solid #d4d5d7;
      margin-top: 10px;
      height: 58px;
      line-height: 58px;
      .tabactive {
        font-size: 16px;
      }
    }
  }
}
</style>
